<?php
/**
 * 成就页面内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('我的成就');

// 页面特定样式
$page_styles = <<<HTML
<style>
    .achievements-header {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 30px;
        background-color: #f8f9fa;
        border-radius: 15px;
    }
    
    .achievements-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #4a90e2;
        margin-bottom: 15px;
    }
    
    .achievements-subtitle {
        font-size: 1.2rem;
        color: #666;
        max-width: 700px;
        margin: 0 auto;
    }
    
    .stats-container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin: 30px 0;
    }
    
    .stat-card {
        width: 180px;
        height: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        margin: 10px;
        padding: 20px;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    
    .stat-value {
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .stat-label {
        font-size: 1rem;
        color: #666;
    }
    
    .stat-card.total-points {
        background-color: #fff8e1;
    }
    
    .stat-card.total-points .stat-icon {
        color: #ffc107;
    }
    
    .stat-card.correct-answers {
        background-color: #e8f5e9;
    }
    
    .stat-card.correct-answers .stat-icon {
        color: #4caf50;
    }
    
    .stat-card.challenges {
        background-color: #e3f2fd;
    }
    
    .stat-card.challenges .stat-icon {
        color: #2196f3;
    }
    
    .stat-card.streak {
        background-color: #fff3e0;
    }
    
    .stat-card.streak .stat-icon {
        color: #ff9800;
    }
    
    .badges-container {
        margin: 30px 0;
    }
    
    .badges-title {
        font-size: 1.8rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .badges-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
    
    .badge-card {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        padding: 20px;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .badge-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }
    
    .badge-image {
        width: 100px;
        height: 100px;
        margin: 0 auto 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
        border-radius: 50%;
        font-size: 2.5rem;
    }
    
    .badge-image.locked {
        opacity: 0.3;
        filter: grayscale(100%);
    }
    
    .badge-name {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .badge-description {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 10px;
    }
    
    .badge-progress {
        margin: 10px 0;
    }
    
    .badge-locked {
        color: #999;
        font-style: italic;
        font-size: 0.9rem;
    }
    
    .progress-chart {
        margin: 40px 0;
    }
    
    .chart-title {
        font-size: 1.8rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .chart-container {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        padding: 20px;
        height: 300px;
    }
    
    .recent-activity {
        margin: 40px 0;
    }
    
    .activity-list {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        padding: 20px;
    }
    
    .activity-item {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #e9ecef;
    }
    
    .activity-item:last-child {
        border-bottom: none;
    }
    
    .activity-icon {
        width: 40px;
        height: 40px;
        background-color: #e9ecef;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    .activity-content {
        flex-grow: 1;
    }
    
    .activity-title {
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .activity-time {
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .activity-points {
        font-weight: bold;
        color: #28a745;
    }
    
    .invite-friends {
        background-color: #f8f9fa;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        margin: 40px 0;
    }
    
    .invite-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .invite-description {
        color: #666;
        margin-bottom: 20px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
</style>
HTML;

$page_scripts = <<<HTML
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 这里可以添加页面特定的JavaScript代码
        // 例如，使用Chart.js绘制图表等
        console.log('成就页面已加载');
    });
</script>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 页面标题 -->
    <div class="achievements-header">
        <h1 class="achievements-title">我的成就</h1>
        <p class="achievements-subtitle">在这里查看你的学习进度、获得的徽章和完成的挑战。继续努力，解锁更多成就！</p>
        
        <!-- 统计数据 -->
        <div class="stats-container">
            <div class="stat-card total-points">
                <div class="stat-icon">⭐</div>
                <div class="stat-value">1,250</div>
                <div class="stat-label">总积分</div>
            </div>
            
            <div class="stat-card correct-answers">
                <div class="stat-icon">✓</div>
                <div class="stat-value">368</div>
                <div class="stat-label">正确回答</div>
            </div>
            
            <div class="stat-card challenges">
                <div class="stat-icon">🏆</div>
                <div class="stat-value">12</div>
                <div class="stat-label">完成挑战</div>
            </div>
            
            <div class="stat-card streak">
                <div class="stat-icon">🔥</div>
                <div class="stat-value">7</div>
                <div class="stat-label">连续学习天数</div>
            </div>
        </div>
    </div>
    
    <!-- 徽章展示 -->
    <div class="badges-container">
        <h2 class="badges-title">我的徽章</h2>
        
        <div class="badges-grid">
            <!-- 已解锁的徽章 -->
            <div class="badge-card">
                <div class="badge-image">🏅</div>
                <div class="badge-name">学习先锋</div>
                <div class="badge-description">完成10次学习任务</div>
                <div class="badge-progress">
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <small class="text-success">已获得</small>
            </div>
            
            <div class="badge-card">
                <div class="badge-image">🎨</div>
                <div class="badge-name">色彩大师</div>
                <div class="badge-description">在色彩认知测试中获得满分</div>
                <div class="badge-progress">
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <small class="text-success">已获得</small>
            </div>
            
            <!-- 进行中的徽章 -->
            <div class="badge-card">
                <div class="badge-image">🧩</div>
                <div class="badge-name">拼图高手</div>
                <div class="badge-description">完成20个拼图挑战</div>
                <div class="badge-progress">
                    <div class="progress">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <small>进度：13/20</small>
            </div>
            
            <!-- 未解锁的徽章 -->
            <div class="badge-card">
                <div class="badge-image locked">🔢</div>
                <div class="badge-name">数学天才</div>
                <div class="badge-description">连续答对30道数学题</div>
                <div class="badge-progress">
                    <div class="progress">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <small>进度：6/30</small>
            </div>
            
            <div class="badge-card">
                <div class="badge-image locked">🧠</div>
                <div class="badge-name">记忆大师</div>
                <div class="badge-description">在记忆游戏中达到5星评级</div>
                <div class="badge-locked">
                    尚未解锁
                </div>
            </div>
            
            <div class="badge-card">
                <div class="badge-image locked">🌟</div>
                <div class="badge-name">全能冠军</div>
                <div class="badge-description">完成所有3-4岁专区的挑战</div>
                <div class="badge-progress">
                    <div class="progress">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <small>进度：4/10</small>
            </div>
        </div>
    </div>
    
    <!-- 最近活动 -->
    <div class="recent-activity">
        <h2 class="chart-title">最近活动</h2>
        
        <div class="activity-list">
            <div class="activity-item">
                <div class="activity-icon">
                    <i class="bi bi-star"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-title">完成了颜色识别挑战</div>
                    <div class="activity-time">今天 10:30</div>
                </div>
                <div class="activity-points">+50分</div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon">
                    <i class="bi bi-puzzle"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-title">解锁了"拼图新手"徽章</div>
                    <div class="activity-time">昨天 16:45</div>
                </div>
                <div class="activity-points">+100分</div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon">
                    <i class="bi bi-calendar-check"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-title">连续学习第5天</div>
                    <div class="activity-time">昨天 09:15</div>
                </div>
                <div class="activity-points">+25分</div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon">
                    <i class="bi bi-check2-circle"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-title">完成了形状匹配游戏</div>
                    <div class="activity-time">2天前 14:20</div>
                </div>
                <div class="activity-points">+30分</div>
            </div>
            
            <div class="activity-item">
                <div class="activity-icon">
                    <i class="bi bi-trophy"></i>
                </div>
                <div class="activity-content">
                    <div class="activity-title">完成了3-4岁数字认知模块</div>
                    <div class="activity-time">3天前 11:05</div>
                </div>
                <div class="activity-points">+80分</div>
            </div>
        </div>
    </div>
    
    <!-- 进度图表 -->
    <div class="progress-chart">
        <h2 class="chart-title">学习进度</h2>
        
        <div class="chart-container">
            <!-- 图表将通过JavaScript动态生成 -->
            <div style="text-align: center; padding-top: 120px; color: #666;">
                <p>学习进度图表将在此显示</p>
                <p><small>需要引入Chart.js等图表库来实现可视化效果</small></p>
            </div>
        </div>
    </div>
    
    <!-- 邀请好友 -->
    <div class="invite-friends">
        <h3 class="invite-title">邀请好友一起学习</h3>
        <p class="invite-description">邀请您的朋友加入KidsMind，共同见证孩子的成长。每邀请一位好友注册成功，您将获得额外的200积分奖励！</p>
        <div class="d-flex justify-content-center">
            <input type="text" class="form-control me-2" style="max-width: 300px;" value="https://kidsmind.com/invite/your123code" readonly>
            <button class="btn btn-primary">复制链接</button>
        </div>
    </div>
</div> 